<template>
	<div class="filtering layout-pd">
		
			<div v-for="(val, key) in pagedata" :key="key" ref="dlRefs" class="filtering-list-flex">
				<el-collapse v-model="collmodule" >
					<el-collapse-item :title="val.groupName" :name="key">
						<template #title>
							<div style="font-size: 13pt;font-weight: 800;color: #333333; padding-left: 20px;">
								{{val.groupName}}
							</div>
						</template>
						<el-row :gutter="20" style="padding: 0 20px;">
							<el-col :span="6" v-for="(v, k) in val.child" :key="k" 							
							@click="onSelItem(v)">
								<div style="height: 52px; border: #999999 solid 1px;padding: 10px;cursor: pointer;line-height: 52px;">
									<iconify  :icon="JSON.parse(v.icon).name" :height="30" :style="{'background': JSON.parse(v.icon).bgc, 'color': JSON.parse(v.icon).color}" />
									<span style="height: 30px;line-height: 30px;margin-left: 10px;font-size: 14px;font-weight: 500;color: #333333; position: absolute;" >
										{{ v.name }} 
									</span>
								</div>		
							</el-col>
						</el-row>
					</el-collapse-item>
				</el-collapse>
			</div>	
		
	</div>

	 <SubmitFlow ref="SubFlowFormDialogRef" :title="subFlowFormTitle" />
</template>

<script setup lang="ts" >
import { ref, reactive, onMounted, guardReactiveProps } from 'vue';
import { useRouter } from 'vue-router';
import {getFlowGroupTreeList} from '/@/api/workflow/approvalflowGroup';
import SubmitFlow from './component/submitFlow.vue';
// import SubFlowFormDialog from './component/SubFlowFormDialog.vue';


// 定义变量内容
const collmodule = ref<any>([]);
const pagedata=ref<any>([]);
const router = useRouter();
const subFlowFormTitle = ref<any>("提交审核单");
const SubFlowFormDialogRef = ref();
const subFlowFormconfig = ref<any>({});
const state = reactive({
	filtering:[],	
    loading: false,
	showSubFlowForm: false,

});

// 页面加载时
onMounted(() => {
	getFlowGroupTree();
    
});
// 获取流程分组树
const getFlowGroupTree = async () => {
    state.loading = true;
    var res = await getFlowGroupTreeList();
	// console.log(res);
    pagedata.value = res.data.result ?? [];;
	// console.log(pagedata.value);
    state.loading = false;
	setcollmodule();
}

const setcollmodule = async () => {
	
	for (let i = 0; i < pagedata.value.length; i++) {
		collmodule.value.push(i);		
	}

	console.log(collmodule.value);
}
// 过滤当前选中的数据
const onSelItem = (v: any) => {
	// state.showSubFlowForm = true;
	// subFlowFormconfig.value = v.formJson;
	console.log(v);
	subFlowFormTitle.value = "提交"+v.name+"审批";
	SubFlowFormDialogRef.value.openDialog(v.formJson);	
};


</script>

<style scoped lang="scss">
.filtering {
	padding: 10px ;
	border-radius: 10px;
	.filtering-list {
	
		
		.filtering-list-flex {
			overflow: hidden;
			border-bottom: none !important;
			&:last-of-type {
				.filtering-list-item {
					border-bottom: none !important;
				}
			}
			.filtering-list-title {
				// float: left;
				width: 100%;
				font-weight: 700;
				position: relative;
				color: #909399;
				margin: 15px 0;
				&:after {
					content: '';
					position: absolute;
					border: 1px solid #909399;
					border-width: 0 1px 1px 0;
					width: 4px;
					height: 4px;
					transform: rotate(-45deg) translateY(-50%);
					right: 10px;
					top: 50%;
				}
			}
			.filtering-list-item {
				border-bottom: 1px dotted var(--next-border-color-light);
				margin-left: 64px;
				overflow: hidden;
				//position: relative;
				.span {
					color: #8d8d91;
					font-size: 14px;
					float: left;
					padding: 0 15px;
					margin: 15px 0 0 15px;
					border: #666666 solid 1px;
					line-height: 80px;
					height: 80px;
					&:hover {
						color: var(--el-color-primary);
						cursor: pointer;
					}
				}
				.dd-active {
					color: var(--el-color-primary);
				}
				.dd-more {
					font-size: 12px;
					position: absolute;
					right: 0;
					top: 16px;
					color: #a5a5a5;
					&:hover {
						cursor: pointer;
						color: #8d8d91;
					}
				}
			}
		}
	}
	.br-top-no {
		border-top: none;
		.flex-warp {
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			margin: 0 -5px;
			.el-row {
				width: 101%;
			}
			.flex-warp-item {
				padding: 5px;
				width: 100%;
				height: 360px;
				.flex-warp-item-box {
					border: 1px solid var(--next-border-color-light);
					width: 100%;
					height: 100%;
					border-radius: 2px;
					display: flex;
					flex-direction: column;
					transition: all 0.3s ease;
					&:hover {
						cursor: pointer;
						border: 1px solid var(--el-color-primary);
						transition: all 0.3s ease;
						box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
						.item-txt-title {
							color: var(--el-color-primary) !important;
							transition: all 0.3s ease;
						}
						.item-img {
							img {
								transition: all 0.3s ease;
								transform: translateZ(0) scale(1.05);
							}
						}
					}
					.item-img {
						width: 100%;
						height: 215px;
						overflow: hidden;
						img {
							transition: all 0.3s ease;
							width: 100%;
							height: 100%;
						}
					}
					.item-txt {
						flex: 1;
						padding: 15px;
						display: flex;
						flex-direction: column;
						overflow: hidden;
						.item-txt-title {
							text-overflow: ellipsis;
							overflow: hidden;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							display: -webkit-box;
							color: #666666;
							transition: all 0.3s ease;
							&:hover {
								color: var(--el-color-primary);
								text-decoration: underline;
								transition: all 0.3s ease;
							}
						}
						.item-txt-other {
							flex: 1;
							align-items: flex-end;
							display: flex;
							.item-txt-msg {
								font-size: 12px;
								color: #8d8d91;
							}
							.item-txt-price {
								display: flex;
								justify-content: space-between;
								align-items: center;
								.font-price {
									color: #ff5000;
									.font {
										font-size: 22px;
									}
								}
							}
						}
					}
				}
			}
		}
		:deep(.el-card__body) {
			height: 100%;
			.filtering-no-data {
				display: flex;
				height: 100%;
				.no-data-box {
					color: #cccccc;
					margin: auto;
					i {
						font-size: 70px;
					}
					.no-txt {
						font-size: 14px;
						text-align: center;
						margin-top: 15px;
					}
				}
			}
		}
	}
	.min-h-360 {
		height: 360px;
	}
}
</style>
